
import React, { Component, createRef, createContext, useContext } from "react";
import type { ReactNode } from 'react'
import './app.css'

/*
    后代传参步骤：
    1. 创建一个上下文对象  createContext
    2. 使用上下文对象中的 Provider 组件，配合 value 属性将值传递到后代组件中
    3.1. 类组件中通过  TitleContext.Consumer 接收祖先组件传递的数据
    3.2. 函数组件中通过  useContext 接收祖先组件传递的数据
*/


interface iState {
}
interface iProps {
    title: string
}
interface iContext { title: string; count: number; }
// 1. 创建一个上下文对象
const TitleContext: React.Context<iContext> = createContext({
    title: '默认值',
    count: 0
})

class First extends Component {

    // 3. 通过静态属性的方式接收祖先组件传递过来的数据
    // static contextType: React.Context<iContext> = TitleContext;


    componentDidMount(): void {
        console.log(this.context, '11111111');
    }

    render(): ReactNode {
        return <>
            <div>
                {/* 4. 使用 */}
                {/* <h2> First 子组件 - {(this.context as iContext).title} - {(this.context as iContext).count} </h2> */}
                <TitleContext.Consumer>
                    {(value: iContext) => {
                        return <h2> First 子组件 - {value.title} - {value.count} </h2>
                    }}
                </TitleContext.Consumer>

                <hr />

                <Son></Son>
            </div>
        </>
    }
}



// function Son() {

//     return <>
//         <TitleContext.Consumer>
//             {(value: iContext) => {
//                 return <h6>Son 孙子组件 - {value.title} - {value.count}</h6>
//             }}
//         </TitleContext.Consumer>
//     </>
// }

function Son() {
    // 函数组件的接收方法 useContext接收
    const titleCon: iContext = useContext(TitleContext)
    return <>
        <h6>Son 孙子组件 - {titleCon.title} - {titleCon.count}</h6>
    </>
}


export default class App extends Component {

    state = {
        title: '辣条'
    }

    render() {
        return <>
            <div id="content">
                <h1>祖先组件 - {this.state.title}</h1>
                <hr />
                {/* 2. 使用上下文对象中的 Provider 组件，配合 value 属性将值传递到后代组件中  */}
                <TitleContext.Provider value={{
                    title: this.state.title,
                    count: 10
                }}>
                    <First></First>
                </TitleContext.Provider>

            </div>
        </>
    }

}